<template>
  <div class="flex flex-col">
    <a v-for="(item, index) in rpaDetailId.split(',').filter(item => item)" :key="index"  @click="goToRpaDetail(item)">
      {{ item.trim() }}
      <br>
    </a>
    <a-drawer :title="$t('user.email.wrong-format23455454')" :visible="visibleq" width="90%" @close="rollback">
      <!-- form表单信息 -->
      <a-form layout="inline" :form="form" class="drawer-form" label-align="left">
        <a-descriptions bordered>
          <a-descriptions-item label="RPA ID">
            {{ rpaInfos.RpaId }}
          </a-descriptions-item>
          <a-descriptions-item :label="$t('user.password.strength.medium')">
            {{ rpaInfos.RpaName }}
          </a-descriptions-item>
          <a-descriptions-item :label="$t('user.login.remember-me')">
            {{
              rpaInfos.RpaDataControllerStr == ""
              ? "-"
              : rpaInfos.RpaDataControllerStr?.split(",")
                .reduce((pre, cur) => {
                  return pre.concat(
                    cur === "Other"
                      ? cur + `:${rpaInfos.RpaDataControllerOther}`
                      : cur
                  );
                }, [])
                .join(",")
            }}
          </a-descriptions-item>
          <a-descriptions-item :label="$t('user.password.strength.low1114545')">
            {{
              rpaInfos.RpaLeaderMasterStr == ""
              ? "-"
              : rpaInfos.RpaLeaderMasterStr
            }}
          </a-descriptions-item>
          <a-descriptions-item :label="$t('user.password.strength.low222q3214')">
            {{
              rpaInfos.RpaLeaderRetinueStr == ""
              ? "-"
              : rpaInfos.RpaLeaderRetinueStr
            }}
          </a-descriptions-item>
          <a-descriptions-item :label="$t('user.verification-code.required1115661105773714413123')">
            {{
              rpaInfos.RpaNumberStr == ""
              ? "-"
              : lang
                ? rpaInfos.RpaNumberStr?.split("/")[0]
                : rpaInfos.RpaNumberStr?.split("/")[1]
                  ? rpaInfos.RpaNumberStr?.split("/")[1]
                  : rpaInfos.RpaNumberStr?.split("/")[0]
            }}
          </a-descriptions-item>
          <a-descriptions-item :label="$t('user.verification-code.required1115661105773714422')">
            {{
              rpaInfos.RpaCollectionChannels == "1"
              ? $t("user.v163")
              : $t("user.v164")
            }}
          </a-descriptions-item>
          <a-descriptions-item :label="$t('user.verification-code.required1115661105773714419')">
            <span v-if="lang">
              {{
                rpaInfos.RpaSystemNetworkStr == ""
                ? "-"
                : rpaInfos.RpaSystemNetworkStr
              }}
            </span>
            <span v-else>
              {{
                rpaInfos.RpaSystemNetworkStrEn == ""
                ? "-"
                : rpaInfos.RpaSystemNetworkStrEn
              }}
            </span>
          </a-descriptions-item>

          <a-descriptions-item :label="$t('user.verification-code.required111566110577371441167547')
              ">
            {{
              rpaInfos.RpaStoragePeriod == "" ? "-" : rpaInfos.RpaStoragePeriod
            }}
          </a-descriptions-item>
          <a-descriptions-item :label="$t('user.verification-code.required1115661105773714416')">
            <span v-if="lang">
              {{
                rpaInfos.RpaSensitiveNumberStr == ""
                ? "-"
                : rpaInfos.RpaSensitiveNumberStr?.split("/")[0]
              }}
            </span>
            <span v-else>
              {{
                rpaInfos.RpaSensitiveNumberStrEn == ""
                ? "-"
                : rpaInfos.RpaSensitiveNumberStrEn
                  ? rpaInfos.RpaSensitiveNumberStrEn
                  : rpaInfos.RpaSensitiveNumberStr?.split("/")[1]
                    ? rpaInfos.RpaSensitiveNumberStr?.split("/")[1]
                    : rpaInfos.RpaSensitiveNumberStr
              }}
            </span>
          </a-descriptions-item>
          <a-descriptions-item :label="$t('user.verification-code.required11156611057737144123123')
                  ">
            <span v-if="lang">
              {{
                rpaInfos.RpaProcessingActivityCycleStr == ""
                ? "-"
                : rpaInfos.RpaProcessingActivityCycleStr
              }}
            </span>
            <span v-else>
              {{
                rpaInfos.RpaProcessingActivityCycleStrEn == ""
                ? "-"
                : rpaInfos.RpaProcessingActivityCycleStrEn
              }}
            </span>
          </a-descriptions-item>
          <a-descriptions-item :label="$t('user.verification-code.required111566110577371447')">
            {{ rpaInfos.RpaFrequency == "" ? "-" : rpaInfos.RpaFrequency }}
          </a-descriptions-item>
          <a-descriptions-item :label="$t('user.verification-code.required1122')">
            {{
              rpaInfos.RpaObjective == ""
              ? "-"
              : rpaInfos.RpaObjective === "其他【请补充说明】" ||
                rpaInfos.RpaObjective === "bussic.target.h"
                ? $t("bussic.target.h")
                : $t(rpaInfos.RpaObjective)
            }}
          </a-descriptions-item>
          <a-descriptions-item :label="$t('bussic.target.supplement')" v-if="rpaInfos.RpaObjective === '其他【请补充说明】' ||
                rpaInfos.RpaObjective === 'bussic.target.h'
                ">
            {{ rpaInfos.RpaObjectiveOther }}
          </a-descriptions-item>
        </a-descriptions>
        <br />
        <!-- || rpaInfos.RpaNoPIOrImportantInvolved == 0  -->
        <div v-if="Pia">{{ $t("user.register.email.placeholder") }}</div>
        <!-- {{
          rpaInfos.RpaIfCompletedPIA == 0 ? "1" : ""
        }} -->

        <a-form-item v-if="Pia">
          <a-table size="middle" class="h-full overflow-x-auto" :data-source="rpaInfos.RpaDataDetail" :pagination="false"
            bordered :rowKey="(record) => record.Id">
            <a-table-column key="DataAssetsId" data-index="DataAssetsId" width="150">
              <span slot="title">{{
                $t("user.verification-code.required111566110577136")
              }}</span>
            </a-table-column>
            <a-table-column key="DataItemStr" data-index="DataItemStr" width="150">
              <span slot="title">{{ $t("app.setting.themecolor.dust") }}</span>
              <template slot-scope="text, record">
                <span v-if="lang">
                  {{ record.DataItemStr }}
                </span>
                <span v-else>
                  {{ record.DataItemsStrEn }}
                </span>
              </template>
            </a-table-column>
            <a-table-column key="DataLevelStr" data-index="DataLevelStr" width="150">
              <span slot="title">{{
                $t("user.verification-code.required111566110577137")
              }}</span>
            </a-table-column>
            <a-table-column key="DataSensitivityStr" data-index="DataSensitivityStr" width="150">
              <span slot="title">{{
                $t("user.verification-code.required111566110577138")
              }}</span>
            </a-table-column>
            <a-table-column key="DetailNecessity" data-index="DetailNecessity" width="150">
              <span slot="title">{{
                $t("user.verification-code.required1115661105771399999")
              }}</span>
            </a-table-column>
            <a-table-column key="CityStr" data-index="CityStr" width="150">
              <span slot="title">{{
                $t("user.register.get-verification-codeeeee")
              }}</span>
            </a-table-column>
            <a-table-column key="DataDepositStr" data-index="DataDepositStr" width="150">
              <span slot="title">{{
                $t("user.verification-code.required1115661105771400000")
              }}</span>
            </a-table-column>
            <a-table-column key="SourceStr" data-index="SourceStr" width="150">
              <span slot="title">{{ $t("user.register-result.msg") }}</span>
            </a-table-column>
            <a-table-column key="DataDestinationStr" data-index="DataDestinationStr" width="150">
              <span slot="title">{{
                $t("user.register-result.activation-email")
              }}</span>
            </a-table-column>
          </a-table>
        </a-form-item>
        <br />
        <br />
        <div class="checkbox" v-if="Pia">
          <a-form-item v-if="lang">
            <span slot="label" style="white-space: normal">{{
              $t("user.verification-code.required1133")
            }}</span>
            <a-checkbox-group class="mt-[20px]" v-model="rpaInfos.RpaActivityCycle" name="checkboxgroup"
              :options="dataProcessingActivityCycleData" disabled />
          </a-form-item>
          <a-form-item v-else class="flex-item">
            <span slot="label" style="white-space: normal">{{
              $t("user.verification-code.required1133")
            }}</span>
            <a-checkbox-group class="mt-[20px]" v-model="rpaInfos.RpaActivityCycle" name="checkboxgroup"
              :options="dataProcessingActivityCycleDataEn" disabled />
          </a-form-item>
          <br />
          <a-form-item v-if="lang">
            <span slot="label" style="white-space: normal">{{
              $t("user.verification-code.required1155")
            }}</span>
            <a-checkbox-group class="mt-[19px]" disabled v-model="rpaInfos.RpaActivityType" name="checkboxgroup"
              :options="processingActivityTypesData" />
          </a-form-item>
          <a-form-item v-else class="flex-item">
            <span slot="label" style="white-space: normal">{{
              $t("user.verification-code.required1155")
            }}</span>
            <a-checkbox-group :class="ind === 1 ? ' mt-[19px]' : ''" disabled v-model="rpaInfos.RpaActivityType"
              name="checkboxgroup" v-for="ind in Math.ceil(processingActivityTypesDataEn.length / 4)"
              :key="ind + processingActivityTypesDataEn[ind]" :options="processingActivityTypesDataEn.slice(4 * ind - 4, 4 * ind)
                " />
          </a-form-item>
        </div>
        <div class="checkbox" v-if="rpaInfos.RpaIfCompletedPIA == 1">
          <span slot="label" style="white-space: normal">If the acitivity completed Privacy Impact Assessment (PIA)
            ?</span>
          <br />
          <span>Please Provide PIA Link</span>

          <br />
          <a-textarea v-model="rpaInfos.RpaPIALinkUrl" :auto-size="{ minRows: 3, maxRows: 7 }" style="width: 490px"
            disabled />
        </div>
        <div class="checkbox" v-if="rpaInfos.RpaNoPIOrImportantInvolved == 1">
          <span>{{ $t('user.verification-code.requiredLuck2311') }}</span>
          <a-popover title="Personal Information" placement="bottom" trigger="click" :overlayStyle="{ width: '30%' }">
            <template #content style="width: 300px;">
              <p>{{ $t('user.verification-code.requiredLuck16') }}</p>
            </template>
            <a-button type="link" style="padding:0 2px">{{ $t('user.verification-code.requiredLuck2333') }}</a-button>
          </a-popover>
          <span>{{ $t('user.verification-code.requiredLuck2322') }}</span>
          <a-popover title="Important Data" placement="bottom" trigger="click" :overlayStyle="{ width: '30%' }">
            <template #content style="width: 300px;">
              <p>{{ $t('user.verification-code.requiredLuck17') }}</p>
              <p>{{ $t('user.verification-code.requiredLuck18') }}</p>
              <p>{{ $t('user.verification-code.requiredLuck19') }}</p>
              <p>{{ $t('user.verification-code.requiredLuck20') }}</p>
              <p>{{ $t('user.verification-code.requiredLuck21') }}</p>
              <p>{{ $t('user.verification-code.requiredLuck22') }}</p>
              <p>{{ $t('user.verification-code.requiredLuck23') }}</p>
            </template>
            <a-button type="link" style="padding:0 2px">{{ $t('user.verification-code.requiredLuck2344') }}</a-button>
          </a-popover> {{ $t('user.verification-code.requiredLuck2355') }}
          <br />
          <span slot="label" style="white-space: normal">{{
            $t('user.verification-code.requiredLuck1515')
          }}</span>
          <br />
          <a-textarea v-model="rpaInfos.RpaNoPIDescProcessedData" :auto-size="{ minRows: 3, maxRows: 7 }"
            style="width: 490px" disabled />
        </div>
      </a-form>
      <div :style="{
				position: 'absolute',
				right: 0,
				bottom: 0,
				width: '100%',
				borderTop: '1px solid #e9e9e9',
				padding: '10px 16px',
				background: '#fff',
				textAlign: 'center',
				zIndex: 1,
			}">
				<!-- 返回 -->
				<a-button type="primary" style="margin-right: 8px" @click="rollback">{{ $t('user.email.required11') }}
				</a-button>
			</div>
      </a-drawer>
  </div>
</template>


<script>
import { configurationSelect } from "@/api/configs";
import { quesionFindRpaId, rpaDetail } from "@/api/rpa/form";

export default {
  props: {
    rpaDetailId: {
      type: String,
    },
    DpiaCommentsTypeStr: {
      type: Array,
    },
  },
  components: {},
  data() {
    return {
      // RPA信息
      rpaInfos: {},
      // 创建DPIA问卷状态
      createQuestionStatus: false,
      dpiaId: undefined,
      rpaId: "",
      // 默认不传ID
      types: false,
      // 下面这些都是通用的
      form: this.$form.createForm(this),
      rowSelection: {
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = selectedRows;
        },
      },
      visibleq: false,
      // DI导入列表
      diDataLists: [],
      // 标题
      selectedRowKeys: [],
      pagination: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      userList: [],
      rpaDidataLists: [],
      visible: false,
      //表格Loading
      listLoading: false,
      loading: false,
      orderInfo: {},
      drugList: [],
      trackList: [],
      systemTimeline: [],
      botTimeline: [],
      trackKey: "",
      // 原始数据
      systemControllerSourceData: [],
      collectionChannelsSourceData: [],
      dataProcessingActivityCycleData: [],
      processingActivityTypesData: [],
      dataProcessingActivityCycleDataEn: [],
      processingActivityTypesDataEn: [],
      detailStatus: false,
      lang: localStorage.getItem("lang").includes("zh-CN"),
      Pia: true,
      Type: 0,
      DpiaRpaId: ''
    };
  },
  methods: {
    async Select() {
      // console.log(this.DpiaCommentsTypeStr)
      this.$router.push({
        path: "/rpa/detail",
        query: { state: "edit", id: this.DpiaRpaId, itLang: this.itLang, Re: 1 },
      });
    },
    async goToRpaDetail(item) {
      if (localStorage.getItem("lang") == '"zh-CN"') {
        this.itLang = true;
      } else if (localStorage.getItem("lang") == '"zh-EN"') {
        this.itLang = false;
      }
      this.visibleq = true;
      // 根据问卷ID查RPA的ID
      // const { data } = await quesionFindRpaId({ Id: this.rpaDetailId });
      // console.log(this.DpiaCommentsTypeStr)
      // if (this.DpiaCommentsTypeStr != undefined) {
      //   let DpiaCommentsTypeStr = this.DpiaCommentsTypeStr
      //   this.DpiaRpaId = data.DpiaRpaId
      //   DpiaCommentsTypeStr.map((item, index) => {
      //     if (item.DpiaCommentsTypeStr == '退回') {
      //       this.Type = 1
      //     }
      //   })
      // }

      const diId= item.match(/\d+/);
      const rpaid = parseInt(diId[0])
      // console.log('rpaid',rpaid);
      
      // 获取RPA详情
      const { data: rpaDetailInfo } = await rpaDetail({ Id: rpaid });
      if (rpaDetailInfo.RpaIfCompletedPIA == 1 || rpaDetailInfo.RpaNoPIOrImportantInvolved == 1) {
        this.Pia = false
      }
      this.rpaInfos = rpaDetailInfo;

      // 加载数据处理活动周期
      const { data: dataProcessingActivityCycleDataEn } =
        await configurationSelect({ state: 6, types: 1 });

      // 加载数据处理活动类型
      const { data: processingActivityTypesDataEn } = await configurationSelect(
        { state: 7, types: 1 }
      );

      // 加载数据处理活动周期
      const { data: dataProcessingActivityCycleData } =
        await configurationSelect({ state: 6 });

      // 加载数据处理活动类型
      const { data: processingActivityTypesData } = await configurationSelect({
        state: 7,
      });

      this.dataProcessingActivityCycleData = dataProcessingActivityCycleData;
      this.dataProcessingActivityCycleDataEn =
        dataProcessingActivityCycleDataEn;
      this.processingActivityTypesData = processingActivityTypesData;
      this.processingActivityTypesDataEn = processingActivityTypesDataEn;
    },
    rollback() {
      if (this.visibleq) {
        this.visibleq = false;
      } else {
        this.visibleq = true;
      }
    },
  },
  mounted() {
    let that = this;
    window.addEventListener("setItemEvent", function (e) {
      if (e.key == "lang") {
        let lang = JSON.parse(e.value);
        if (lang == "zh-EN") {
          that.lang = false;
        } else {
          that.lang = true;
        }
      }
    });
  },
};
</script>
<style lang="less" scoped>
.border-none {
  border: 1px solid rgba(36, 89, 229, 1);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.card {
  display: flex;
  align-items: center;
  border-radius: 8px;
  box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.3);
  padding: 20px;
  padding-right: 150px;

  h4 {
    font-size: 30px;
  }

  p {
    font-size: 16px;
    color: #999;
  }
}

/deep/ .drawer-form {
  margin-bottom: 50px;

  .ant-form-item {
    margin-right: 10px;
  }

  .ant-form-item-label {
    display: inline-block;
    line-height: 20px;
    width: 100px;
    margin-right: 10px;
    margin-top: 10px;
    margin-left: 10px;
  }

  .checkbox {
    background: #eee;
    padding: 10px;
    margin-top: 16px;
    position: relative;
    top: -10px;

    .ant-form-item-label {
      display: inline-block;
      line-height: 40px;
      width: 150px;
      // margin-right: 10px;
    }
  }
}

/deep/ .ant-table-thead {
  background: #f4f7ff;
  font-weight: 700;
}

.import-butoon {
  margin-top: 13px;
}

.table-di {
  margin-top: 13px;
}

.ty {
  width: 13px;
  height: 13px;
  opacity: 1;
  background: rgba(255, 255, 255, 1);
  border: 4px solid #5076a5;
  border-radius: 50%;
}

.tags {
  left: 298px;
  top: 288px;
  width: 6px;
  height: 14px;
  opacity: 1;
  border-radius: 2px;
  background: rgba(0, 80, 247, 1);
}

/deep/ .ant-form-item-label {
  overflow: visible !important;
}

/deep/ .ant-col ant-form-item-label .ant-form-item-label-left {
  margin-right: 67px;
}

:deep(.flex-item) {
  display: flex;

  .ant-form-item-label-left {
    min-width: 150px;
  }
}
</style>